class: center, middle, inverse, title-slide # Analysing FIFA Data with the Bayesian LASSO ### Jens Klenke ### March 3rd 2020 --- class: inverse ``` ## Loading required package: pacman ``` --- # Installing The **xaringan** package is on CRAN, but I recommend installing the development release from <i class="fab fa-github "></i> ```r devtools::install_github('yihui/xaringan') ``` .pull-left[ You will also need two other CSS files for the custom University of Sydney styling: - `sydney-fonts.css` - `sydney.css` ] .pull-right[ If you want the University Logo to show up on the title slide, you'll also need - `USydLogo-black.svg` ] These are available in the assets folder of the GitHub code repository [<i class="fab fa-github "></i> `garthtarr/sydney_xaringan`](http://github.com/garthtarr/sydney_xaringan/assets) To make things easy to get started, I recommend downloading a copy of the `sydney_xaringan` repo [<i class="fas fa-file-archive "></i>](https://github.com/garthtarr/sydney_xaringan/archive/master.zip) and make changes to the template. --- background-image: url(data:image/png;base64,#https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg) background-size: 250px background-position: 50% 75% ## xaringan - Press `h` or `?` to see the possible ninjutsu you can use in remark.js. - You can see all the goodies like this (hint press `p`). - Check out more in-depth tutorial [here](https://slides.yihui.name/xaringan/#1) --- ## Why xaringan/remark.js? <i class="fas fa-check-circle fa-pull-right "></i> - Printing (in Google Chrome) is a lot more reliable for xaringan/remark.js - The customisation of the CSS and using it is a lot easier in xaringan/remark.js - You almost never need to write any manual HTML chunks (e.g. `<div style="text-align: center;"></div>`) - With remark.js' Markdown, you can add arbitrary CSS classes to elements using syntax `.className[elements]`, which is very handy compared to `<span class="className"></span>` - You can write slide notes under three question marks `???`. These notes are only displayed in the presentation mode, and only the speaker can see these notes. - The keyboard shortcuts: press keys like `P` (presentation mode), `C` (clone slides to a new window, useful for presentation mode), `B` (black out), `M` (mirror the slide), and `H` (help), etc. More: [yihui.name/en/2017/08/why-xaringan-remark-js/](https://yihui.name/en/2017/08/why-xaringan-remark-js/) --- ## Why **not** xaringan/remark.js? <i class="fas fa-times-circle fa-pull-right "></i> - It is difficult to generate self-contained HTML presentation files. I.e. you'll need access to the internet for it to work properly. However, the quality of the print to pdf means that you'll have excellent pdf backup slides but it will lack animation, gifs, etc. - You can't embed shiny apps (easily) and not all htmlwidgets are guaranteed to work. - I have a lot of ioslides and beamer content... but it's not so hard to translate from ioslides to xaringan (beamer's another story). - I haven't worked out how to activate slide scrolling. I've looked into it but I'm not sure if it's possible. Possibly a good thing, slide scrolling made me lazy with results presentation, and often caused issues with printing. --- ## googleVis Embedded by exporting to HTML and including as an iframe. <iframe src = "Geo.html" width = "100%" height = "90%" frameborder="0"></iframe> --- ## Content boxes <i class="fas fa-box fa-pull-right "></i> .content-box-blue[This is a `.content-box-blue[]` chunk. ] -- If you have just a few words, it only highlights the words: .content-box-army[`.content-box-army[]`] .content-box-yellow[`.content-box-yellow[]`] .content-box-red[`.content-box-red[]`] .content-box-purple[`.content-box-purple[]`] -- If the text includes a new line character, you get a 100% width box. I've used `.columns-2[]` it's 100% of the column width. .columns-2[ .content-box-gray[ `.content-box-gray[]` ] .content-box-green[ `.content-box-green[]` ] ] --- ## Quotes <i class="fas fa-quote-right fa-pull-right "></i> .small[ We can include **block quotes** using<br> `<blockquote>Quote goes here</blockquote>` or<br> `> Quote goes here` or `.blockquote[Quote here]` ] .pull-left[ <blockquote> Statistics is the grammar of science. .right[-- <cite>Karl Pearson</cite>] </blockquote> .blockquote[Quote] > Quote quote ] .pull-right[.small[ ``` <blockquote> Statistics is the grammar of science. .right[-- <cite>Karl Pearson</cite>] </blockquote> .blockquote[Quote] > Quote quote ``` ]] --- ## Statistical thinking Many of the data science slides have a quote-like box for **statistical thinking** or **aim**. .pull-left[ .small[ ``` .blockquote[ ### `r icon::fa("comment-dots")` Statistical thinking - Point 1 ] ``` ] .blockquote[ ### <i class="fas fa-comment-dots "></i> Statistical thinking - Point 1 ] ] .pull-right[ .small[ ``` .blockquote[ ### `r icon::fa("location-arrow")` Aim - Point 1 ] ``` ] .blockquote[ ### <i class="fas fa-location-arrow "></i> Aim - Point 1 ] ] .footnote[ This code is a bit easier to write than the old way of doing it. ``` <div class="thinkingbox"> ### <span class="fa-stack fa"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-location-arrow fa-stack-1x fa-inverse"></i></span> Aim - Point 1 </div> ``` ] --- ## Scrolling R output .scroll-output[ I tend to think it's best to format the slide such that everything you want to show is visible, however there can be times when the R output is extensive, and it's not important that the whole lot is printable (i.e. won't appear on the pdf version of the slides), but you might want to be able to scroll down interactively during the presentation. This can be done using the `.scroll-output[]` class. ```r step(lm(Fertility~.,data = swiss)) ``` ``` ## Start: AIC=190.69 ## Fertility ~ Agriculture + Examination + Education + Catholic + ## Infant.Mortality ## ## Df Sum of Sq RSS AIC ## - Examination 1 53.03 2158.1 189.86 ## <none> 2105.0 190.69 ## - Agriculture 1 307.72 2412.8 195.10 ## - Infant.Mortality 1 408.75 2513.8 197.03 ## - Catholic 1 447.71 2552.8 197.75 ## - Education 1 1162.56 3267.6 209.36 ## ## Step: AIC=189.86 ## Fertility ~ Agriculture + Education + Catholic + Infant.Mortality ## ## Df Sum of Sq RSS AIC ## <none> 2158.1 189.86 ## - Agriculture 1 264.18 2422.2 193.29 ## - Infant.Mortality 1 409.81 2567.9 196.03 ## - Catholic 1 956.57 3114.6 205.10 ## - Education 1 2249.97 4408.0 221.43 ``` ``` ## ## Call: ## lm(formula = Fertility ~ Agriculture + Education + Catholic + ## Infant.Mortality, data = swiss) ## ## Coefficients: ## (Intercept) Agriculture Education Catholic ## 62.1013 -0.1546 -0.9803 0.1247 ## Infant.Mortality ## 1.0784 ``` ] --- ## Scrolling R output If you just want a section of the output to be scrollable (not the whole page). You need to define how many lines you want the "box" to show. There are classes for `.scroll-box-8[]` for 8 lines, `.scroll-box-10[]` for 10 lines, ... , `.scroll-box-20[]` for 20 lines. .pull-left[ `.scroll-box-8[]` .scroll-box-8[ ```r swiss[,1:3] ``` ``` ## Fertility Agriculture Examination ## Courtelary 80.2 17.0 15 ## Delemont 83.1 45.1 6 ## Franches-Mnt 92.5 39.7 5 ## Moutier 85.8 36.5 12 ## Neuveville 76.9 43.5 17 ## Porrentruy 76.1 35.3 9 ## Broye 83.8 70.2 16 ## Glane 92.4 67.8 14 ## Gruyere 82.4 53.3 12 ## Sarine 82.9 45.2 16 ## Veveyse 87.1 64.5 14 ## Aigle 64.1 62.0 21 ## Aubonne 66.9 67.5 14 ## Avenches 68.9 60.7 19 ## Cossonay 61.7 69.3 22 ## Echallens 68.3 72.6 18 ## Grandson 71.7 34.0 17 ## Lausanne 55.7 19.4 26 ## La Vallee 54.3 15.2 31 ## Lavaux 65.1 73.0 19 ## Morges 65.5 59.8 22 ## Moudon 65.0 55.1 14 ## Nyone 56.6 50.9 22 ## Orbe 57.4 54.1 20 ## Oron 72.5 71.2 12 ## Payerne 74.2 58.1 14 ## Paysd'enhaut 72.0 63.5 6 ## Rolle 60.5 60.8 16 ## Vevey 58.3 26.8 25 ## Yverdon 65.4 49.5 15 ## Conthey 75.5 85.9 3 ## Entremont 69.3 84.9 7 ## Herens 77.3 89.7 5 ## Martigwy 70.5 78.2 12 ## Monthey 79.4 64.9 7 ## St Maurice 65.0 75.9 9 ## Sierre 92.2 84.6 3 ## Sion 79.3 63.1 13 ## Boudry 70.4 38.4 26 ## La Chauxdfnd 65.7 7.7 29 ## Le Locle 72.7 16.7 22 ## Neuchatel 64.4 17.6 35 ## Val de Ruz 77.6 37.6 15 ## ValdeTravers 67.6 18.7 25 ## V. De Geneve 35.0 1.2 37 ## Rive Droite 44.7 46.6 16 ## Rive Gauche 42.8 27.7 22 ``` ]] .pull-right[ `.scroll-box-14[]` .scroll-box-14[ ```r swiss[,1:3] ``` ``` ## Fertility Agriculture Examination ## Courtelary 80.2 17.0 15 ## Delemont 83.1 45.1 6 ## Franches-Mnt 92.5 39.7 5 ## Moutier 85.8 36.5 12 ## Neuveville 76.9 43.5 17 ## Porrentruy 76.1 35.3 9 ## Broye 83.8 70.2 16 ## Glane 92.4 67.8 14 ## Gruyere 82.4 53.3 12 ## Sarine 82.9 45.2 16 ## Veveyse 87.1 64.5 14 ## Aigle 64.1 62.0 21 ## Aubonne 66.9 67.5 14 ## Avenches 68.9 60.7 19 ## Cossonay 61.7 69.3 22 ## Echallens 68.3 72.6 18 ## Grandson 71.7 34.0 17 ## Lausanne 55.7 19.4 26 ## La Vallee 54.3 15.2 31 ## Lavaux 65.1 73.0 19 ## Morges 65.5 59.8 22 ## Moudon 65.0 55.1 14 ## Nyone 56.6 50.9 22 ## Orbe 57.4 54.1 20 ## Oron 72.5 71.2 12 ## Payerne 74.2 58.1 14 ## Paysd'enhaut 72.0 63.5 6 ## Rolle 60.5 60.8 16 ## Vevey 58.3 26.8 25 ## Yverdon 65.4 49.5 15 ## Conthey 75.5 85.9 3 ## Entremont 69.3 84.9 7 ## Herens 77.3 89.7 5 ## Martigwy 70.5 78.2 12 ## Monthey 79.4 64.9 7 ## St Maurice 65.0 75.9 9 ## Sierre 92.2 84.6 3 ## Sion 79.3 63.1 13 ## Boudry 70.4 38.4 26 ## La Chauxdfnd 65.7 7.7 29 ## Le Locle 72.7 16.7 22 ## Neuchatel 64.4 17.6 35 ## Val de Ruz 77.6 37.6 15 ## ValdeTravers 67.6 18.7 25 ## V. De Geneve 35.0 1.2 37 ## Rive Droite 44.7 46.6 16 ## Rive Gauche 42.8 27.7 22 ``` ]] --- ## Lists, increments and footnotes<i class="fas fa-list fa-pull-right "></i> .pull-left[ - Unordered lists<sup>1</sup> - can be created using "-" - and they can be nested using 2 or 4 space.fn[2] - deep nested - original nesting level ### Ordered list 1. one 2. two 3. three ] .footnote[ [1] Footnotes are not automatic. In the text use `<sup>1</sup>` or `.fn[1]` [2] At the end of the slide `.footnote[[1] Text associated with footnote 1.]` ] -- .pull-right[ To get an incremental slide use two dashes `--` on a new line with no trailing white space. If the dashes aren't on their own line or there's a white space after it won't work. .font80[.content-box-purple[ The two dash increments don't work inside class calls. For example, you can't have an increment in a `.pull-right[...]` block or in a `.columns-2[...]` block as the dashes are not considered to be special in the markdown processing when they're inside one of these blocks. ]] ] --- ## Icons <i class="fas fa-exclamation fa-pull-right "></i> Perhaps the easiest way to include icons in your xaringan presentations is through the **icon** package. The **icon** package lets you include [font awesome](http://fontawesome.io), [academicons](http://jpswalsh.github.io/academicons/) and [ionicons](http://ionicons.com) into R Markdown documents. It's not yet on CRAN, so install it using ```r devtools::install_github("ropenscilabs/icon") ``` -- .pull-left[ ```r icon::fa("rocket") ``` <i class="fas fa-rocket "></i> ```r icon::fa("spinner", size = 2, animate = "spin") ``` <i class="fas fa-spinner fa-2x fa-spin "></i> ] -- .pull-right[ Inline expressions also work. <i class="fas fa-bell "></i> created using `` `r icon::fa("bell")` `` <br> For more info see [the <i class="fab fa-github "></i> repo](https://github.com/ropenscilabs/icon). ] --- ## Data tables <i class="fas fa-table fa-pull-right "></i> .font80[ ```r library("DT"); library("dplyr") iris %>% DT::datatable(class = "compact", rownames = FALSE, extensions = "Buttons", options = list(dom = 'tBp', buttons = c("csv","excel"), pageLength = 8)) %>% DT::formatRound(1:4, digits = 1) ``` <div id="htmlwidget-d4743ac282b06677cce2" style="width:100%;height:auto;" class="datatables html-widget"></div> <script type="application/json" data-for="htmlwidget-d4743ac282b06677cce2">{"x":{"filter":"none","extensions":["Buttons"],"data":[[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7,4.8,5.4,5.2,5.5,4.9,5,5.5,4.9,4.4,5.1,5,4.5,4.4,5,5.1,4.8,5.1,4.6,5.3,5,7,6.4,6.9,5.5,6.5,5.7,6.3,4.9,6.6,5.2,5,5.9,6,6.1,5.6,6.7,5.6,5.8,6.2,5.6,5.9,6.1,6.3,6.1,6.4,6.6,6.8,6.7,6,5.7,5.5,5.5,5.8,6,5.4,6,6.7,6.3,5.6,5.5,5.5,6.1,5.8,5,5.6,5.7,5.7,6.2,5.1,5.7,6.3,5.8,7.1,6.3,6.5,7.6,4.9,7.3,6.7,7.2,6.5,6.4,6.8,5.7,5.8,6.4,6.5,7.7,7.7,6,6.9,5.6,7.7,6.3,6.7,7.2,6.2,6.1,6.4,7.2,7.4,7.9,6.4,6.3,6.1,7.7,6.3,6.4,6,6.9,6.7,6.9,5.8,6.8,6.7,6.7,6.3,6.5,6.2,5.9],[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2,3.1,3.4,4.1,4.2,3.1,3.2,3.5,3.6,3,3.4,3.5,2.3,3.2,3.5,3.8,3,3.8,3.2,3.7,3.3,3.2,3.2,3.1,2.3,2.8,2.8,3.3,2.4,2.9,2.7,2,3,2.2,2.9,2.9,3.1,3,2.7,2.2,2.5,3.2,2.8,2.5,2.8,2.9,3,2.8,3,2.9,2.6,2.4,2.4,2.7,2.7,3,3.4,3.1,2.3,3,2.5,2.6,3,2.6,2.3,2.7,3,2.9,2.9,2.5,2.8,3.3,2.7,3,2.9,3,3,2.5,2.9,2.5,3.6,3.2,2.7,3,2.5,2.8,3.2,3,3.8,2.6,2.2,3.2,2.8,2.8,2.7,3.3,3.2,2.8,3,2.8,3,2.8,3.8,2.8,2.8,2.6,3,3.4,3.1,3,3.1,3.1,3.1,2.7,3.2,3.3,3,2.5,3,3.4,3],[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5,1.7,1.5,1,1.7,1.9,1.6,1.6,1.5,1.4,1.6,1.6,1.5,1.5,1.4,1.5,1.2,1.3,1.4,1.3,1.5,1.3,1.3,1.3,1.6,1.9,1.4,1.6,1.4,1.5,1.4,4.7,4.5,4.9,4,4.6,4.5,4.7,3.3,4.6,3.9,3.5,4.2,4,4.7,3.6,4.4,4.5,4.1,4.5,3.9,4.8,4,4.9,4.7,4.3,4.4,4.8,5,4.5,3.5,3.8,3.7,3.9,5.1,4.5,4.5,4.7,4.4,4.1,4,4.4,4.6,4,3.3,4.2,4.2,4.2,4.3,3,4.1,6,5.1,5.9,5.6,5.8,6.6,4.5,6.3,5.8,6.1,5.1,5.3,5.5,5,5.1,5.3,5.5,6.7,6.9,5,5.7,4.9,6.7,4.9,5.7,6,4.8,4.9,5.6,5.8,6.1,6.4,5.6,5.1,5.6,6.1,5.6,5.5,4.8,5.4,5.6,5.1,5.1,5.9,5.7,5.2,5,5.2,5.4,5.1],[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3,0.2,0.4,0.2,0.5,0.2,0.2,0.4,0.2,0.2,0.2,0.2,0.4,0.1,0.2,0.2,0.2,0.2,0.1,0.2,0.2,0.3,0.3,0.2,0.6,0.4,0.3,0.2,0.2,0.2,0.2,1.4,1.5,1.5,1.3,1.5,1.3,1.6,1,1.3,1.4,1,1.5,1,1.4,1.3,1.4,1.5,1,1.5,1.1,1.8,1.3,1.5,1.2,1.3,1.4,1.4,1.7,1.5,1,1.1,1,1.2,1.6,1.5,1.6,1.5,1.3,1.3,1.3,1.2,1.4,1.2,1,1.3,1.2,1.3,1.3,1.1,1.3,2.5,1.9,2.1,1.8,2.2,2.1,1.7,1.8,1.8,2.5,2,1.9,2.1,2,2.4,2.3,1.8,2.2,2.3,1.5,2.3,2,2,1.8,2.1,1.8,1.8,1.8,2.1,1.6,1.9,2,2.2,1.5,1.4,2.3,2.4,1.8,1.8,2.1,2.4,2.3,1.9,2.3,2.5,2.3,1.9,2,2.3,1.8],["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica"]],"container":"<table class=\"compact\">\n <thead>\n <tr>\n <th>Sepal.Length<\/th>\n <th>Sepal.Width<\/th>\n <th>Petal.Length<\/th>\n <th>Petal.Width<\/th>\n <th>Species<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"dom":"tBp","buttons":["csv","excel"],"pageLength":8,"columnDefs":[{"targets":0,"render":"function(data, type, row, meta) {\n return type !== 'display' ? data : DTWidget.formatRound(data, 1, 3, \",\", \".\");\n }"},{"targets":1,"render":"function(data, type, row, meta) {\n return type !== 'display' ? data : DTWidget.formatRound(data, 1, 3, \",\", \".\");\n }"},{"targets":2,"render":"function(data, type, row, meta) {\n return type !== 'display' ? data : DTWidget.formatRound(data, 1, 3, \",\", \".\");\n }"},{"targets":3,"render":"function(data, type, row, meta) {\n return type !== 'display' ? data : DTWidget.formatRound(data, 1, 3, \",\", \".\");\n }"},{"className":"dt-right","targets":[0,1,2,3]}],"order":[],"autoWidth":false,"orderClasses":false,"lengthMenu":[8,10,25,50,100]}},"evals":["options.columnDefs.0.render","options.columnDefs.1.render","options.columnDefs.2.render","options.columnDefs.3.render"],"jsHooks":[]}</script> ] --- ## FAQ <i class="fas fa-question-circle fa-pull-right "></i> <blockquote> How do I start a new slide? </blockquote> Using three dashes at the start of a new line <code>---</code> -- <blockquote> I have three dashes but it's not starting a new slide. </blockquote> The three dashes need to be on their own line with **no spaces after them** -- <blockquote> I'm giving my presentation but the text is too small. HELP! </blockquote> By default remark.js disables browser based zooming. I've found and modified a hack to re-enable it, but it's not perfect. [`remark-zoom.js`](https://github.com/William-Yeh/remark-zoom) I'm also open to increasing the default font size - need to test it out on a range of displays. --- background-image: url("data:image/png;base64,#assets/title-image1.jpg") background-position: 100% 50% background-size: 50% 75% ## Background images .pull-left[ - We can place images anywhere on the screen by using `background-image` in conjunction with <br>`background-position` - The image, size and position are defined immediately after the `---` that starts a new slide. Assuming `image.jpg` is in the same folder as your `.Rmd` file, the code is: ``` --- background-image: url("image.jpg") background-position: 100% 50% background-size: 50% 75% ## Background images .pull-left[ ... Left column text here ... ] ``` ] --- class: center, middle # Text adjustments It is also possible to change the .blue[color] of any text by using `.color[text here]` -- For example `.grey[grey]` will make text .grey[grey]. -- We can do this with white, .brand-red[Sydney master brand red], .brand-blue[Sydney master brand blue], .brand-yellow[Sydney master brand yellow], .brand-charcoal[Sydney master brand charcoal], .brand-grey[Sydney master brand grey], .black[black], .red[red], .blue[blue], .green[green], .yellow[yellow], .orange[orange], .purple[purple], .grey[grey]. -- To make text stand out we can use standard markdown `**text**` like **this** or `.bold[this]` .bold[this]. Or italics using `_italic_` _italic_. You can string together these formats, e.g. `.blue[.bold[...]]` to get .blue[.bold[blue and bold text]]. -- .left[.footnote[The text on this slide is centered and in the middle of the slide because the slide began with: ``` --- class: center, middle ``` ]] --- class: sydney-yellow ## Two columns! <i class="fas fa-columns fa-pull-right "></i> .pull-left[ ### Some things on the left 1. List of things; 1. Plain Markdown; 1. blah blah; and 1. Plain Markdown ] -- .pull-right[ ### and other things on the right We do this by using the `.pull-left[]` and `.pull-right[]` commands. Just put any text inside the brackets and you're good to go ] Code below (or above) these two has no problem extending the full width of the slide. .footnote[The background of this slide is Sydney University Yellow because the slide began with: ``` --- class: sydney-yellow ``` ] --- ## R code and highlighting <i class="fab fa-r-project fa-pull-right "></i> .pull-left[ An example using a leading `*`: ```r if (TRUE) { ** message("Very important!") } ``` Output: ```r if (TRUE) { * message("Very important!") } ``` This is invalid R code, so it is a plain fenced code block that is not executed. ] .pull-right[ An example using `{{}}`: ```{r tidy=FALSE} if (TRUE) { *{{ message("Very important!") }} } ``` Output: ```r if (TRUE) { * message("Very important!") } ``` ``` ## Very important! ``` It is valid R code so you can run it. ] --- class: middle, bottom background-image: url("data:image/png;base64,#assets/USydLogo.svg") background-size: 50% background-position: 90% 10% This slide starts with ``` --- class: middle, bottom background-image: url("assets/USydLogo.svg") background-size: 50% background-position: 90% 10% ``` If you want the background image to take up the full slide use ``` --- class: middle, bottom background-image: url("assets/USydLogo.svg") *background-size: contain *background-position: 50% 50% ``` --- class: segue # Next section .left[.footnote[ ``` --- class: segue ``` ]] --- class: segue-red # Next section .left[.footnote[ ``` --- class: segue-red ``` ]] --- class: segue-yellow background-image: url("data:image/png;base64,#assets/USydLogo.svg") background-size: 20% background-position: 95% 95% # Next section .left[.footnote[ ``` --- class: segue-yellow background-image: url("assets/USydLogo.svg") background-size: 20% background-position: 95% 95% ``` ]] --- class: sydney-blue ## Title for sydney-blue class text here .footnote[ ``` --- class: sydney-blue ``` ] --- class: sydney-red ## .white[Title for sydney-red class] text here .footnote[ ``` --- class: sydney-red ``` ] --- class: sydney-yellow ## Title for sydney-yellow class text here .footnote[ ``` --- class: sydney-yellow ``` ] --- ## Title slide image .small[ I don't have a good solution for the title slide image. I considered hard coding it to look for a file called `title-image.jpg` in the same folder as the `sydney.css` file. This is possible and if this file is missing, it's no problem, it just won't show an image. The image would be hardcoded to be stretched the full height of the title slide and to only take up 50% of the width. But I decided this was less than optimal. In the longer term, I'd like to make this more general, being able to specify the file path in the yaml along with the size and position. I'd also like to be able to specify the background colour. But I have no idea if this is technically feasible or not. In the iterim, you can specify `seal: false` in the yaml to disable the default title slide and create your own. For example: ] .code70[ ``` --- class: title-slide background-image: url("assets/USydLogo-black.svg"), url("assets/title-image2.jpg") background-position: 10% 90%, 100% 50% background-size: 160px, 100% 100% # .black[Manual title slide] ## Subtitle ### Author ### Date ``` ] --- class: title-slide background-image: url("data:image/png;base64,#assets/USydLogo.svg"), url("assets/title-image1.jpg") background-position: 10% 90%, 100% 50% background-size: 160px, 100% 100% # .text-shadow[.black[Manual title slide (title-image.1)]] ## Subtitle ### Author ### Date --- class: title-slide background-image: url("data:image/png;base64,#assets/USydLogo-white.svg"), url("assets/title-image1.jpg") background-position: 10% 90%, 100% 50% background-size: 160px, 50% 100% background-color: #0148A4 # .text-shadow[.white[Manual title slide]] ## .white[Subtitle] ### .white[Author] ### .white[Date] --- class: title-slide background-image: url("data:image/png;base64,#assets/USydLogo-black.svg"), url("assets/title-image2.jpg") background-position: 10% 90%, 100% 50% background-size: 160px, 100% 100% # .text-shadow[.black[Manual title slide]] ## Subtitle ### Author ### Date --- ## Example YAML .code70[ ```r --- title: "Xaringan" subtitle: "A theme for the <br>University of Sydney" author: "Garth Tarr" date: "15 May 2018" output: xaringan::moon_reader: css: ["default", "assets/sydney-fonts.css", "assets/sydney.css"] self_contained: false # if true, fonts will be stored locally seal: true # show a title slide with YAML information includes: in_header: "assets/mathjax-equation-numbers.html" nature: beforeInit: ["assets/remark-zoom.js", "https://platform.twitter.com/widgets.js"] highlightStyle: github highlightLines: true countIncrementalSlides: false ratio: '4:3' # alternatives '16:9' or '4:3' or others e.g. 13:9 navigation: scroll: false # disable slide transitions by scrolling --- class: title-slide background-image: url("assets/USydLogo-white.svg"), url("assets/title-image1.jpg") background-position: 10% 90%, 100% 50% background-size: 160px, 50% 100% background-color: #0148A4 # Manually specify title here ## Manually specify subtitle here ### Manually specify author here ### Manually specify date here ``` ] --- ## Font sizes .pull-left[ .pull-left[ .font10[.font10] .font20[.font20] .font30[.font30] .font40[.font40] .font50[.font50] .font60[.font60] .font70[.font70] .font80[.font80] .font90[.font90] Standard .font110[.font110] .font120[.font120] .font130[.font130] .font140[.font140] .font150[.font150] .font160[.font160] .font170[.font170] .font180[.font180] .font190[.font190] .font200[.font200] ] .pull-right[ .code10[`.code10[]`] .code20[`.code20[]`] .code30[`.code30[]`] .code40[`.code40[]`] .code50[`.code50[]`] .code60[`.code60[]`] .code70[`.code70[]`] .code80[`.code80[]`] .code90[`.code90[]`] `standard` .code110[`.code110[]`] .code120[`.code120[]`] .code130[`.code130[]`] .code140[`.code140[]`] .code150[`.code150[]`] .code160[`.code160[]`] .code170[`.code170[]`] .code180[`.code180[]`] .code190[`.code190[]`] .code200[`.code200[]`] ] ] .pull-right[ I've also enabled an alternate approach, that operates on all text: inline code, code chunks and regular text. .Large[.Large `.Large[]` 144%] .large[.large `.large[]` 120%] .small[.small `.small[]` 90%] .footnotesize[.footnotesize `.footnotesize[]` 80%] .scriptsize[.scriptsize `.scriptsize[]` 70%] .tiny[.tiny `.tiny[]` 60%] ] --- ## Font sizes This is normal sized and coloured text. With a normal size code and output: ```r rnorm(2) ``` ``` ## [1] 0.8560734 -0.8412409 ``` .blue[.small[This blue text is in a `.blue[.small[...]]` chunk. Everything is shrunk to 90% including the `inline code` as well as code chunks and their output: ```r rnorm(2) ``` ``` ## [1] 2.207537 -0.173190 ``` ]] --- class: columns-2 ## Equations MathJax is supported out of the box. You can put inline equations inside dollar signs, e.g. `$\alpha + \beta$` renders as `\(\alpha + \beta\)`. Display style works with double dollar signs: <span>`$`</span><span>`$`</span>`\bar{X} = \frac{1}{n} \sum_{i=1}^n X_i`<span>`$`</span><span>`$`</span> `$$\bar{X} = \frac{1}{n}\sum_{i=1}^n X_i$$` For multi-line equations you can use <span>`\`</span>`begin{align} ... `</span>`\`</span>`end{align}` `\begin{align} \bar{X} & = X_1 + X_2 + \ldots + X_n \nonumber \\ & = \frac{1}{n}\sum_{i=1}^nX_i \label{good-eq} \end{align}` Note the equation number! We can reference it in the usual way, using <span>`\`</span>`eqref{label}`, \eqref{good-eq}, or <span>`\`</span>`ref{label}`, \ref{good-eq}. --- ## Equation numbering Equation numbering isn't part of the standard xaringan package but I've included it with the Sydney theme. This is enabled with the inclusion of the `in_header` line in the YAML with reference to the file `mathjax-equation-numbers.html` which needs to be in an appropriate location. ``` output: xaringan::moon_reader: includes: * in_header: "assets/mathjax-equation-numbers.html" ``` --- ## Central limit theorem Let `\(X_{1}, X_{2},\ldots\)` be independent random variables with characteristic functions `\(\phi_{1},\phi_{2},\ldots\)` and distribution functions `\(F_{1},F_{2},\ldots\)` and let `\(\mathbb{E} X_{i}=0\)` and `\(\mathbb{E} X_{i}^{2}=\sigma_{i}^{2}<\infty\)`, `\(i=1,2,\ldots\)`. Write `\(S_{n} = \sum_{i=1}^{n}X_{i}\)` and `\(s_{n}=\textrm{Var}(S_{n}) = \sum_{i=1}^{n}\sigma^{2}_{i}\)`. Let `\begin{align} L_{n}(\varepsilon) & = s^{-2}_{n}\sum_{i=1}^{n}\mathbb{E}\big[ X_{i}^{2}\mathbb{I}\big(|X_{i}|>\varepsilon s_{n}\big)\big] \nonumber \\ & = s_{n}^{-2}\sum_{i=1}^{n}\int_{|x|>\varepsilon s_{n}}x^{2}\operatorname{d}F_{n}(x) \end{align}` The _Lindeberg condition_ states: `$$\begin{equation}\text{for all } \varepsilon>0,\ L_{n}(\varepsilon)\rightarrow0 \text{ as }n\rightarrow\infty.\label{LindCond}\end{equation}$$` If `\(\mathbb{E}|X_{1}|^{3}<\infty\)` and `\(s_{n}^{-3}\sum_{i=1}^{n}\mathbb{E}|X_{i}^{3}|\rightarrow 0\)` as `\(n\rightarrow\infty\)` then Lindeberg's condition holds. This condition under which the Lindeberg's condition holds is known as Liapounov's condition \eqref{LindCond}. --- # Tables .pull-left[ - Tables are centered by default in **xaringan**. - We can override this using `.pull-left[]` and `.pull-right[]` | This | is | a | table | | :---- | :-- | -----: | :----------: | | It is | now | pulled | to the left | | 12 | 34 | 56 | 78 | ] .pull-right[ ```r knitr::kable(iris[1:10, 1:4], format = "html") ``` .small[ <table> <thead> <tr> <th style="text-align:right;"> Sepal Length </th> <th style="text-align:right;"> Sepal Width </th> <th style="text-align:right;"> Petal Length </th> <th style="text-align:right;"> Petal Width </th> </tr> </thead> <tbody> <tr> <td style="text-align:right;"> 5.1 </td> <td style="text-align:right;"> 3.5 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> </tr> <tr> <td style="text-align:right;"> 4.9 </td> <td style="text-align:right;"> 3.0 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> </tr> <tr> <td style="text-align:right;"> 4.7 </td> <td style="text-align:right;"> 3.2 </td> <td style="text-align:right;"> 1.3 </td> <td style="text-align:right;"> 0.2 </td> </tr> <tr> <td style="text-align:right;"> 4.6 </td> <td style="text-align:right;"> 3.1 </td> <td style="text-align:right;"> 1.5 </td> <td style="text-align:right;"> 0.2 </td> </tr> <tr> <td style="text-align:right;"> 5.0 </td> <td style="text-align:right;"> 3.6 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> </tr> <tr> <td style="text-align:right;"> 5.4 </td> <td style="text-align:right;"> 3.9 </td> <td style="text-align:right;"> 1.7 </td> <td style="text-align:right;"> 0.4 </td> </tr> <tr> <td style="text-align:right;"> 4.6 </td> <td style="text-align:right;"> 3.4 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.3 </td> </tr> <tr> <td style="text-align:right;"> 5.0 </td> <td style="text-align:right;"> 3.4 </td> <td style="text-align:right;"> 1.5 </td> <td style="text-align:right;"> 0.2 </td> </tr> <tr> <td style="text-align:right;"> 4.4 </td> <td style="text-align:right;"> 2.9 </td> <td style="text-align:right;"> 1.4 </td> <td style="text-align:right;"> 0.2 </td> </tr> <tr> <td style="text-align:right;"> 4.9 </td> <td style="text-align:right;"> 3.1 </td> <td style="text-align:right;"> 1.5 </td> <td style="text-align:right;"> 0.1 </td> </tr> </tbody> </table> ] ] --- ## Citations and references <i class="fas fa-book fa-pull-right "></i> .pull-left[ Xaringan doesn't support bibliographies in the usual markdown way (i.e. specifying a bibtex file in the yaml). It is possible to cite sources from a `.bib` file using the **RefManageR** package. To do this, specify the `BibOptions()`: .small[ ```r library(RefManageR) BibOptions( check.entries = FALSE, bib.style = "authoryear", cite.style = "authoryear", style = "markdown", hyperlink = FALSE, dashed = FALSE) *myBib = ReadBib("myBib.bib") ``` ] ] .pull-right[ Make sure you update the highlighted line. Then you can cite any entry from your `.bib` file inline using `Citet()`, `Citep()`, `AutoCite()`, etc. (see [RefManageR](https://github.com/ropensci/RefManageR)). - Tarr, Müller, and Weber (2016) - (Tarr, Müller, and Weber, 2016) ] --- ## Reference list To generate your bibliography, use the `PrintBibliography()` function inside a knitr chunk with options `results='asis', echo=FALSE`. The function will search the entire `.Rmd` document for your citations and include them in the output. Tarr, G, S. Müller, and N. Weber (2016). "Robust estimation of precision matrices under cellwise contamination". In: _Computational Statistics & Data Analysis_ 93, pp. 404-420. DOI: [10.1016/j.csda.2015.02.005](https://doi.org/10.1016%2Fj.csda.2015.02.005). If you have a long list of references, and want to split them over multiple slides, you can use the `start` and `end` arguments to the `PrintBibliography()` function. E.g. .small[ `PrintBibliography(bib, start=1, end=7)` ] --- ## Embedding tweets .pull-left[ 1. Get the link to embed the tweet from twitter. 2. Paste it into your slides. 3. Make sure the highlighted code from below is is in your YAML .footnote[.small[ ``` output: xaringan::moon_reader: nature: * beforeInit: ["assets/remark-zoom.js", "https://platform.twitter.com/widgets.js"] ``` ]] ] .pull-right[ <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Finally finished documenting the xaringan pkg for Rmd/remark.js-based slides w/ another weekend <a href="https://t.co/1mkJYj13WR">https://t.co/1mkJYj13WR</a> Now I can sleep well <a href="https://t.co/k6hj6xDrwF">pic.twitter.com/k6hj6xDrwF</a></p>— Yihui Xie (@xieyihui) <a href="https://twitter.com/xieyihui/status/808418548829847552?ref_src=twsrc%5Etfw">December 12, 2016</a></blockquote> ] --- class: sydney-blue background-image: url(data:image/png;base64,#assets/USydLogo-white.svg) background-size: 260px background-position: 5% 95% # Thanks! .pull-right[.pull-down[ <a href="mailto:garth.tarr@sydney.edu.au"> .white[<i class="fas fa-paper-plane "></i> garth.tarr@sydney.edu.au] </a> <a href="http://garthtarr.github.io/sydney_xaringan"> .white[<i class="fas fa-link "></i> garthtarr.github.io/sydney_xaringan] </a> <a href="http://twitter.com/garthtarr"> .white[<i class="fab fa-twitter "></i> @garthtarr] </a> <a href="http://github.com/garthtarr"> .white[<i class="fab fa-github "></i> @garthtarr] </a> <br><br><br> ]]